<html>
    <head>
        <style>
                #div01{
                    width: 300px;
                    height: 300px;
                    background-color: coral;
                }
        </style>
    </head>
    <body>
        <div id="div01">
        </div>
        <img src="img/mimi.webp" id="img">
        <script>
            div01.onclick=function(){div01.textContent="鼠标单击了";}
            div01.ondblclick=function(){div01.textContent="鼠标双击了";}
            div01.onmousedown=function(){div01.textContent="鼠标按下了";}
            div01.onmouseup=function(){div01.textContent="鼠标抬起";}
            div01.onmouseover=function(){div01.textContent="鼠标移入";}
            div01.onmouseout=function(){div01.textContent="鼠标移出";}
            div01.onmousemove=function(){div01.textContent="鼠标移动"+event.clientX+","+event.clientY;}

            
            
            img.onmouseover=function(){img.style.opacity=0.5;}//透明
            img.onmouseout=function(){img.style.opacity=1;}//不透明


            
        </script>
    </body>
</html>